import React, {useEffect, useRef} from "react";
import {FormBox} from '@/components/FormLayout';
import {EE} from "@/utils";
import dvTool from "@/pages/dv/dvTool";
import {wrapperType, layouts, IFields, EnumControlType} from "@/pages/dv/constants/EnumCommon";
import {EnumDataType} from "@/pages/dv/constants/EnumDv";


interface IProps {
  uid: string;
  dataConfig: DV.IDataConfig
}
export default function DataConfigBox({uid, dataConfig}: IProps) {
  const formRef: any = useRef();

  useEffect(() => {

    EE.on(dvTool.EnumChartFire.update_baseConfig, (config: IBaseConfig) => {
      formRef.current.setFieldsValue(config);
    })
  }, [])

  function getBaseFields(): IFields[]{
    return [
      {
        formItemProps: {
          name: 'dataType',
          label: '数据绑定方式',
        },
        controlType: EnumControlType.Select,
        layout: layouts.inline,
        data: Object.values(EnumDataType).map(item => ({...item, value: item.type}))
      },
    ];
  }

  function onValuesChange(changedValues: DV.IDataConfig, allValues: object) {
    dvTool.updateDataConfig(uid, changedValues)
  }


  return <div>
    <FormBox
      fields={getBaseFields()}
      initialValues={dataConfig}
      onValuesChange={onValuesChange}
      getForm={(form) => {
        formRef.current = form
      }}
    />
  </div>
}
